<template>
    <div>
        <el-card class="box-card m-b" body-style="padding-top: 10px; padding-bottom: 10px;">
            <el-row>
                <div class="row m-t-sm"  >
                    <div class="col-lg-12">
                        <FileSelect v-on:file="diff_1"></FileSelect>
                        <FileSelect v-on:file="diff_2"></FileSelect>
                        <FileSelect v-on:file="diff_3"></FileSelect>
                        <el-row >
                            <div class="block">
                                <label class="col-form-label mr-1">{{'关键字:'}}</label>
                                <el-select
                                    v-model="keyWord"
                                    multiple
                                    @change="change"
                                    style="width: 200px;"
                                    size="mini"
                                    class="mr-4">
                                    <el-option label="revision" value="revision"></el-option>
                                    <el-option label="path" value="path"></el-option>
                                    <el-option label="groups" value="groups"></el-option>
                                    <el-option label="upstream" value="upstream"></el-option>
                                </el-select>
                                <el-button
                                    size="mini"
                                    type="primary"
                                    @click="projectCompare"
                                    class=""
                                    style="margin-left: 30px;margin-right: 5px;">
                                    对比
                                </el-button>
                            </div>
                        </el-row>
                    </div>
                </div>
            </el-row>
        </el-card>
        
        <el-card shadow="never"> 
            <div slot="header" class="clearfix">
                <span>项目比对信息</span>
            </div>
            <el-row >
                <el-table
                    :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
                    border
                    style="width: 100%">
                    <el-table-column prop="name" label="name"></el-table-column>
                    <el-table-column
                        align="center"                    
                        v-for="columnProp in columnsSettings"
                        :key="columnProp.prop"                     
                        :label="columnProp.label">                       
                        <el-table-column 
                            align="center"                            
                            v-for="item in keyWord"
                            :key="columnProp.prop+'_'+item"
                            :prop="columnProp.prop+'_'+item"
                            :label="item">

                        </el-table-column>                       
                    </el-table-column>                   
                </el-table>
                <el-pagination
                    style="padding-top: 10px;"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-row>     
        </el-card>
    </div>
</template>


<script>
import FileSelect from './FileSelect';
import { getHeader } from '@/app.config'

export default {
    components: {
        FileSelect,
    },
    data() {
        return {
            currentPage: 1,
            total: 0,
            tableData: [],
            pageSize: 10,
            file1: {
                file: '',
                project: '',
            },
            file2: {
                file: '',
                project: '',
            },
            file3: {
                file: '',
                project: '',
            },            
            keyWord: ['revision'],
            keyWords: ['revision', 'path', 'groups', 'upstream'],
            columnsSettings: [
                {prop: 'file1', label: 'File1'},
                {prop: 'file2', label: 'File2'},
                {prop: 'file3', label: 'File3'},
            ]
        
        }
    },
    methods:{
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },
        change(val) {
            console.log(val)
        },
        diff_1: function(file) {
            if (file.file) {
                this.file1.file = 'file:file1+' + file.file;
                this.file1.project = file.project;
            } else {
                this.file1.file = '';
                this.file1.project = '';
            } 
        },
        diff_2: function(file) {
            if (file.file) {
                this.file2.file = 'file:file2+' + file.file;
                this.file2.project = file.project;
            }  else {
                this.file2.file = '';
                this.file2.project = '';
            } 
        },
        diff_3: function(file) {
            if (file.file) {
                this.file3.file = 'file:file3+' + file.file;
                this.file3.project = file.project;
            } else {
                this.file3.file = '';
                this.file3.project = '';
            }  
        },
        xmlCompare: function(file_list) {
            var source = process.env.VUE_APP_KANBAN_HOST+'/api/manifest/projectcompare?filelist='+file_list
            this.$axios.get(source, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.tableData = response.data.result;
                            this.total = this.tableData.length;
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        projectCompare: function() {
            var file_list = ''
            console.log(this.file1, this.file2, this.file3);
            if (this.file1.file) {
                file_list = file_list + this.file1.file;
            }
            if (this.file2.file) {
                if (file_list) {
                    file_list = file_list + ','
                }
                file_list = file_list + this.file2.file;
            }
            if (this.file3.file) {
                if (file_list) {
                    file_list = file_list + ','
                }
                file_list = file_list + this.file3.file;
            }
            console.log(file_list);
            if (file_list) {
                if(!this.keyWord.length) {
                    this.$message.error('请先选择对比关键字');
                    return
                }      
                this.xmlCompare(file_list);
            }
            
        },
        // filter_string(string) {
        //     var filter_data;
        //     filter_data = this.compare_result.filter(function(element) {
        //         var result = {};
        //         for (const key in element) {
        //             if (key.indexOf('name')>=0) {
        //                 result[key] = element[key];
        //             }
        //             if (key.indexOf(string)>=0) {
        //                 result[key] = element[key];
        //             }
                    
        //         }
        //         return result;
        //     });
        //     var columns = ['name'];
        //     var columns_key = [
        //         {data: 'name'}
        //     ]
        //     if (this.file1) {
        //         columns.push(this.project1);
        //         columns_key.push({data: 'file1_'+string})
        //     }
        //     if (this.file2) {
        //         if (columns.indexOf(this.project2)>=0){
        //             columns.push(this.project2+'(File2)');
        //         } else {
        //             columns.push(this.project2);
        //         }
        //         columns_key.push({data: 'file2_'+string})
                
        //     }
        //     if (this.file3) {
        //         if (columns.indexOf(this.project3)>=0){
        //             columns.push(this.project3+'(File3)');
        //         } else {
        //             columns.push(this.project3);
        //         }
        //         columns_key.push({data: 'file3_'+string})
        //     }
        //     this.tableinfo_compare.columns = columns
        //     this.tableinfo_compare.columns_key = columns_key
        //     this.tableinfo_compare.table_data = filter_data;
        // },
        // keyChanged: function() {
        //     this.filter_string(this.keyWord);
        // }
    },
    watch: {
        
    },
    computed: {
    },
    mounted: function() {
    }
        
}
</script>

